<template>
	<view>
		<view class="container">
			<headerView :title='title' :backBtn="true"></headerView>
			
			<!-- tab 选择 -->
			<view class="tab-container">
				<view :class="['tab-item', { 'tab-item-active': selectTabIndex === index }]"
					v-for="(tab, index) in tabOptions" :key="index" @click="selectTab(index)">
					{{ tab }}
					<view v-if="index === 1 && salesSort === 'asc'">↑</view>
					<view v-if="index === 1 && salesSort === 'desc'">↓</view>
					<view v-if="index === 2 && priceSort === 'asc'">↑</view>
					<view v-if="index === 2 && priceSort === 'desc'">↓</view>
				</view>
			</view>

			<!-- 商品内容 -->
			<view class="product">
				<product-item v-for="(product, index) in sortedProductData" :key="index" :product="product"></product-item>
			</view>
		</view>
	</view>
</template>

<script>
	import headerView from "../components/header/header.vue";
	import ProductItem from '@/newsPage/components/product-item.vue';
	import banlance from '@/api/banlance';

	export default {
		components: {
			headerView,
			ProductItem
		},
		data() {
			return {
				title: "会员升级",
				tabOptions: ["综合", "销量", "价格"],
				selectTabIndex: 0, // 初始选中的 tab 索引
				salesSort: 'desc', // 销量排序，默认降序
				priceSort: 'asc', // 价格排序，默认升序
				productData: [] // 存储从接口获取的商品数据
			};
		},
		computed: {
			// 排序后的商品数据
			sortedProductData() {
				let sortedData = [...this.productData];
				
				if (this.selectTabIndex === 1) {
					// 按销量排序
					sortedData.sort((a, b) => {
						return this.salesSort === 'asc' ? a.drawNum - b.drawNum : b.drawNum - a.drawNum;
					});
				} else if (this.selectTabIndex === 2) {
					// 按价格排序
					sortedData.sort((a, b) => {
						return this.priceSort === 'asc' ? a.money - b.money : b.money - a.money;
					});
				}
				
				return sortedData;
			}
		},
		mounted() {
			this.getProduct();
		},
		methods: {
			selectTab(index) {
				if (index === 1) {
					// 切换销量排序方式
					this.salesSort = this.salesSort === 'asc' ? 'desc' : 'asc';
				} else if (index === 2) {
					// 切换价格排序方式
					this.priceSort = this.priceSort === 'asc' ? 'desc' : 'asc';
				}
				this.selectTabIndex = index;
			},
			getProduct() {
				banlance.getProduct({}).then(res => {
					if (res.code === 1) {
						this.productData = res.data.map(item => ({
							image: item.thumb,
							title: item.name,
							infoText: item.description,
							price: parseFloat(item.money),
							stock: item.stock,
							drawNum: item.drawNum, // 销量
							merchantImage: "/static/share.gif",
							merchantName: "付加加"
						}));
					} else {
						console.log("获取商品失败", res);
					}
				});
			}
		}
	};
</script>


<style lang="less" scoped>
	.tab-container {
		display: flex;
		background-color: #fff;
		border-bottom: 1px solid #eee;

		.tab-item {
			flex: 1;
			text-align: center;
			padding: 30rpx 0;
			cursor: pointer;
			position: relative;
			display: flex;
			justify-content: center;

			&.tab-item-active {
				color: #f76e00;

				&::after {
					content: "";
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 60%;
					height: 4rpx;
					background-color: #f76e00;
				}
			}
		}
	}

	.content {
		padding: 20rpx;
	}

	.product {
		padding-top: 20rpx;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(350rpx, 1fr));
		grid-gap: 20rpx;
		justify-items: center;

		.product-item {
			border-radius: 20rpx;
			overflow: hidden;
			width: 350rpx;
			height: 515rpx;
			background-color: #fff;

			.product-image {
				width: 100%;
				height: 350rpx;
			}

			.product-info {
				padding: 10rpx 20rpx;

				.item-info-title {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.item-info-price {
					color: #7b7b7b;
					font-size: 26rpx;
					padding: 10rpx 0;

					.price {
						margin-left: 10rpx;
						color: #f76e00;
					}
				}

				.item-info-merchant {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #7b7b7b;

					image {
						width: 35rpx;
						height: 35rpx;
						border-radius: 100%;
						vertical-align: middle;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>